<script lang="ts">
  import { Link } from 'svelte-routing';

  const pathsToMatch = ['/vehicles', '/warehouse-entries', '/warehouse-exits'];
  let isActive = pathsToMatch.some((path) => window.location.pathname.includes(path));
</script>

<main>
  <div class="bg-white fixed bottom-0 left-0 right-0 shadow-md flex justify-around items-center py-2 text-gray-500">
    <div class="text-center">
      <Link to="/" getProps={({ isCurrent }) => ({ class: isCurrent ? 'text-blue-500' : '' })}>
        <svg class="h-6 w-6 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2-2-2 2-2h2l2 2 2-2h2l2 2 2-2h2l2 2-2 2 2 2m-2 0l2 2 2 2h-4l-2-2-2 2h-2l-2-2-2 2H5l-2-2 2-2z" />
        </svg>
        <div class="text-xs">首页</div>
      </Link>
    </div>
    <div class="text-center">
      <Link to="/vehicles" class={isActive ? 'text-blue-500' : ''}>
        <svg class="h-6 w-6 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8h-8H4m8-8a8 8 0 110 16 8 8 0 010-16z" />
        </svg>
        <div class="text-xs">车辆</div>
      </Link>
    </div>
    <div class="text-center">
      <Link to="/profile" getProps={({ isCurrent }) => ({ class: isCurrent ? 'text-blue-500' : '' })}>
        <svg class="h-6 w-6 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 12h8m-8 4h16" />
        </svg>
        <div class="text-xs">我的</div>
      </Link>
    </div>
  </div>
</main>

<style lang="scss">
</style>
